<template>
	<div class="follow" @scroll="handleScroll">
		<el-timeline>
			<el-timeline-item v-for="(item, index) in list" :key="index" :timestamp="item.create_at" placement="top">
				<div slot="dot">
					<img v-if="item.follow_type == 2" src="../../../../../assets/gjz.png" width="20px" alt="" />
					<img v-else-if="item.follow_type == 3" src="../../../../../assets/error.png" width="20px" alt="" />
					<img v-else-if="item.follow_type == 4" src="../../../../../assets/suc.png" width="20px" alt="" />
					<img v-else-if="item.follow_type == 1" src="../../../../../assets/wgz.png" width="20px" alt="" />
				</div>
				<p>
					{{ item.follow_user_name }} 发表
					<span v-if="item.follow_type == 1" style="color: #26B8A0;">【未跟进】</span>
					<span v-else-if="item.follow_type == 2" style="color: #999999;">【跟进中】</span>
					<span v-else-if="item.follow_type == 3" style="color: #F38B93;">【已拒绝】</span>
					<span v-else-if="item.follow_type == 4" style="color: #6881EC;">【已成交】</span>
				</p>
				<div style="background-color: #f6f7fb;padding: 15px 10px;border-radius: 5px;display: flex;flex-direction: column;">
					<span>{{ item.content }}</span>
					<span style="margin-top: 10px;" v-if="photoList[index].fileList.length != 0">
						<van-uploader v-model="photoList[index].fileList" :max-count="photoList[index].fileList.length - 1" :deletable="false" />
					</span>
				</div>
			</el-timeline-item>
		</el-timeline>
		<div class="footer">
			<van-button block color="#6881ec" @click="handleCall">打电话</van-button>
			<van-button block color="#6881ec" @click="handleAddFollow">添加跟进</van-button>
		</div>
	</div>
</template>

<script>
import { getFollowList } from '../../../api/detail.js';
import { Toast, Button, uploader } from 'vant';
export default {
	components: {
		[Toast.name]: Toast,
		[Button.name]: Button,
		[uploader.name]: uploader
	},
	props: {
		info: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			list: [],
			total: 0,
			page: 1,
			follow: {
				// 1: '未跟进',
				2: '跟进中',
				3: '已拒绝',
				4: '已成交'
			}
		};
	},
	computed: {
		photoList() {
			var arr = [];
			this.list.forEach(item => {
				let fileList = [];
				item.photo.forEach(res => {
					fileList.push({
						url: res
					});
				});
				arr.push({
					fileList
				});
			});
			return arr;
		}
	},
	created() {
		this.getList();
	},
	methods: {
		async getList(isConcat = false) {
			const { code, data, msg, count } = await getFollowList({
				external_user_id: sessionStorage.getItem('external_user_id'),
				follow_userid: localStorage.getItem('huankemao_user_id'),
				page: this.page,
				limit: 10
			});
			if (code === 200) {
				if (isConcat) {
					this.list = this.list.concat(data);
				} else {
					this.list = data;
				}
				this.total = count || 0;
			} else {
				Toast.fail(msg);
			}
		},
		handleScroll(e) {
			const oScroll = e.target;
			if (oScroll.scrollTop + oScroll.clientHeight >= oScroll.scrollHeight) {
				if (this.total > this.list.length) {
					this.page++;
					this.getList(true);
				}
			}
		},
		// 打电话
		handleCall() {
			if (this.info.follow_remark_mobiles) {
				var a = document.createElement('a');
				a.href = `tel:${this.info.follow_remark_mobiles}`;
				a.click();
			} else {
				Toast.fail('请添加电话号码后再尝试');
			}
		},
		// 添加跟进
		handleAddFollow() {
			this.$router.push('/detail_follow');
		}
	}
};
</script>

<style lang="less" scoped>
.follow {
	padding: 10px 15px;
	height: calc(100vh - 260px);
	overflow-x: hidden;
	overflow-y: auto;
	/deep/.el-timeline-item__dot {
		top: -2px;
		left: -5px;
	}
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(255, 255, 255, 0);
		display: flex;
		align-items: center;
		justify-content: space-between;
		.van-button {
			width: 49%;
		}
	}
}
</style>
